<template>
	<view class="online_order">
		<!-- 导航 -->
		<!-- <u-navbar back-icon-color="#000000" title="立即下单" title-color="#3F3F3F" :title-bold="true" :border-bottom="false" :background="background"></u-navbar> -->
		<u-navbar back-text="立即下单" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- end -->
		<view v-if="shows" style="text-align: center;padding-bottom: 100rpx;">
			<view style="padding: 70rpx 0 24rpx 0;">还没有地址哦~快去添加地址吧~</view>
			<u-button size="medium" shape="circle" :plain="true" type="warning" @click="adds()">去添加地址</u-button>
		</view>
		<view v-else>
			<view class="biaozhu">
				<image src="../../static/icon/gantan.png" mode=""></image>
				<view class="write" style="margin-left: 22rpx;">地址会做隐私处理，订单确认前不会告知商家详细地址</view>
			</view>
			<view class="head">
				<view style="font-weight: bold;color: #7A7A7A;">
					<text class="namm" style="font-size: 30rpx;">{{ address.contactsName }}</text>
					<text class="namm" style="font-size: 26rpx;padding-left: 20rpx;">{{ address.contactsPhone }}</text>
				</view>
				<view class="serve" style="color: #7A7A7A;font-size: 26rpx;">
					<view style="width: 23%;">服务地址：</view>
					<view class="fuwu" style="width: 77%;display: flex;justify-content: space-between;align-items: center;" @click="getAddress()">
						<!-- <view class="dizhi">{{address.province}}{{address.city}}{{address.region}}{{address.address}}</view> -->
						<view class="dizhi">{{ address.province }}{{ address.city }}{{ address.region }}{{ address.address }}</view>
						<u-icon name="arrow-right" style="" color="#707070" size="20"></u-icon>
					</view>
				</view>
				<view class="contact" style="color: #7A7A7A;font-size: 26rpx;">
					<text class="xiang" style="width: 23%;">详细地址：</text>
					<text style="display: inline-block;width: 77%;" class="ads">{{ address.address }}</text>
				</view>
			</view>
		</view>

		<image src="../../static/icon/dixian.png" mode="" style="width: 100%;height: 6rpx;"></image>
		<!-- 日常保洁 -->
		<view v-if="chargeType == 1">
			<view style="display: flex;padding: 30rpx 0rpx; align-items: center;justify-content: space-between;width: 92%;margin: auto;">
				<view style="display: flex;">
					<view style="color: #000000;font-size: 30rpx;">{{ titleName }}</view>
					<view
						style="margin-left:16rpx ; color:#FC9023 ;border: 1px solid #FC8A17;border-radius: 10rpx; font-size: 20rpx;width: 108rpx;height: 40rpx;line-height: 32rpx;text-align: center;"
					>
						平台匹配
					</view>
				</view>
				<view style="color: #FC7E00;font-size: 26rpx;">￥{{ minPrice }}~￥{{ maxPrice }}{{ univalenceUnit }}</view>
			</view>
			<view style="width: 100%;height: 1rpx;background-color: #E4E7EB;"></view>
			<view class="" style="width: 92%;padding-top: 40rpx; margin: auto; display: flex;align-items: center;justify-content: space-between;">
				<text style="color:#3F3F3F ;font-size: 30rpx;">请选择服务时长（下面为参考时长）</text>
				<view style=""><u-number-box v-model="choose_time" @change="valChange"></u-number-box></view>
			</view>
			<view class="fenlei" style="padding-top: 50rpx;">
				<view class="" style="text-align: center;" v-for="(item, index) in typeList" :key="index" :data-id="item.id" @click="detal(item.time, index)">
					<view class="type" :class="inde == item.id ? 'acts' : 'acts_2'">
						{{ item.type }}
						<!-- <image src="../../static/icon/gou.png" mode="" v-if="inde == item.id"></image> -->
					</view>
					<view class="tai" style="margin-top: 18rpx;" :class="{ actss: inde == item.id }">{{ item.time }}小时</view>
				</view>
			</view>
		</view>
		<!-- 家电清洗 -->
		<view v-if="chargeType == 3">
			<view style="display: flex;padding: 30rpx 0rpx; align-items: center;justify-content: space-between;width: 92%;margin: auto;">
				<view style="display: flex;">
					<view style="color: #000000;font-size: 30rpx;">{{ titleName }}</view>
					<view
						style="margin-left:16rpx ; color:#FC9023 ;border: 1px solid #FC8A17;border-radius: 10rpx; font-size: 20rpx;width: 108rpx;height: 40rpx;line-height: 32rpx;text-align: center;"
					>
						平台匹配
					</view>
				</view>
				<view style="color: #FC7E00;font-size: 26rpx;">￥{{ minPrice }}~￥{{ maxPrice }}{{ univalenceUnit }}</view>
			</view>
			<view style="width: 100%;height: 1rpx;background-color: #E4E7EB;"></view>
			<view style="width: 92%; padding: 30rpx 0rpx; margin: auto; display: flex;align-items: center;justify-content: space-between;">
				<view class="" style="color: #3F3F3F;font-size: 30rpx;">请选择服务数量</view>
				<view style="color: #272755;font-size: 26rpx;display: flex;align-items: center;">
					<u-number-box v-model="choose_num" @change="valChange_jd"></u-number-box>
					<!-- <view style="margin-left: 10rpx;">台</view> -->
				</view>
			</view>
			<view style="width: 100%;height: 1rpx;background-color: #E4E7EB;"></view>
			<view class="fenlei" style="padding: 40rpx 0rpx;">
				<view class="" style="text-align: center;" v-for="(item, index) in typeLists" :key="index" :data-id="item.specificId" @click="detals(item.specificId)">
					<view class="type" :class="indes == item.specificId ? 'acts' : 'acts_2'">{{ item.name }}</view>
				</view>
			</view>
			<view style="width: 100%;height: 1rpx;background-color: #E4E7EB;"></view>
		</view>
		<!-- 布艺清洗 -->
		<view v-if="chargeType == 2" style="width: 100%;margin: auto;">
			<view style="display: flex;padding: 20rpx 0rpx; align-items: center;justify-content: space-between;width: 92%;margin: auto;">
				<view style="display: flex;">
					<view style="color: #000000;font-size: 30rpx;">{{ titleName }}</view>
					<view
						style="margin-left:16rpx ; color:#FC9023 ;border: 1px solid #FC8A17;border-radius: 10rpx; font-size: 20rpx;width: 108rpx;height: 40rpx;line-height: 32rpx;text-align: center;"
					>
						平台匹配
					</view>
				</view>
				<view style="color: #FC7E00;font-size: 26rpx;">￥{{ minPrice }}~￥{{ maxPrice }}{{ univalenceUnit }}</view>
			</view>
			<view style="width: 100%;height: 1rpx;background-color: #E4E7EB;"></view>
			<view style="display: flex;padding: 20rpx 0rpx;width: 92%;margin: auto; align-items: center;justify-content: space-between;">
				<view class="choose" style="color: #3F3F3F;font-size: 30rpx;">输入清洁面积</view>
				<view class="fen_types" style="color: #3F3F3F;font-size: 30rpx;">
					<input type="text" value="" v-model="area" @input="onInput" />
					㎡
				</view>
			</view>
			<view style="width: 100%;height: 1rpx;background-color: #E4E7EB;"></view>

			<view v-if="titleName == '玻璃清洗'" style="display: flex;width: 92%;margin: auto;padding: 20rpx 0;align-items: center;justify-content: space-between;">
				<view class="choose" style="color: #3F3F3F;font-size: 30rpx;">纱窗数量({{ additional[0].minAdditionalPrice }}~{{ additional[0].maxAdditionalPrice }})元/个</view>
				<view class="fen_types" style="color: #3F3F3F;font-size: 30rpx;">
					<input type="text" value="" v-model="area_sc" @input="onInput2" />
					个
				</view>
			</view>
			<view style="width: 100%;height: 1rpx;background-color: #E4E7EB;"></view>
		</view>
		<view class="time" style="align-items: center;justify-content: space-between;">
			<view style="display: flex;align-items: center;">
				<image style="width:24rpx ;height: 24rpx;margin-right: 10rpx;" src="../../static/gx_img/xiadan_1.png"></image>
				<view class="start">选择开始时间</view>
			</view>
			<view class="xuanze" @click="is_show()">
				<u-select
					style="line-height: 32rpx;width: 4%;"
					title="选择开始时间"
					v-model="show"
					mode="mutil-column-auto"
					:list="list"
					confirm-color="#FCC800"
					@confirm="confirm"
				></u-select>
				<view class="" style="text-align: right;">{{ result }}</view>
				<image style="width: 14rpx;height: 24rpx;margin-left: 25rpx;" src="../../static/icon/jian.png" mode=""></image>
			</view>
		</view>
		<!-- 	<view class="time">
			<view class="start" style="color: #3F3F3F;font-size: 30rpx;">选择开始时间</view>
			<view class="xuanze">
				<u-select
					style="line-height: 32rpx;width: 4%;"
					title="选择开始时间"
					v-model="show"
					mode="mutil-column-auto"
					:list="list"
					confirm-color="#FCC800"
					@confirm="confirm"
				></u-select>
				<view @click="show = true" class="" style="text-align: center;color: #000000;">{{ result }}</view>
				<u-icon name="arrow-right" style="" color="#707070" size="30"></u-icon>
			</view>
		</view> -->
		<view style="display: flex;justify-content: space-between;" v-if="isShow">
			<view></view>
			<view class="biaozhus">
				<image src="../../static/icon/gantan.png" mode=""></image>
				<view class="write" style="margin-left: 22rpx;">未选择时间</view>
			</view>
		</view>
		<!-- <view class="biao_zhu">
				<view class="zhu">服务须知：</view>
				<view class="write">服务人员上门后会再次确认服务内容，出现偏差后进行多退少补</view>
			</view> -->

		<view class="footer">
			<view class="foot_mon" style="padding-bottom:26rpx;">
				<!-- <view class="writes">
					<text style="color: #656565;">共计：</text><text style="color: #F29423;">{{prices}}元</text>
				</view> -->
				<view
					@click="fast()"
					style="width: 100%;margin: auto; height: 88rpx;line-height: 88rpx;background: #FCA800;
border: 1px solid #FCA800;border-radius: 26rpx;font-size: 38rpx;text-align: center;color:#FFFFFF;"
				>
					开始匹配
					<!-- <u-button size="medium" shape="circle" type="warning" @click="fast()">立即预约</u-button> -->
				</view>
			</view>
		</view>
		<lodings v-if="loding_istrue"></lodings>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import lodings from '../../components/loding_zdy.vue';
export default {
	components: {
		lodings
	},
	data() {
		return {
			is_zhifu: true,
			loding_istrue: false,
			additionalId: '',
			choose_num: 1,
			choose_time: 2,
			titleName: '',
			// 以上新参数
			background: {
				backgroundColor: '#fca800'
			},
			show: false,
			list: [],
			// times:[],
			result: '请选择时间',
			title: 'picker',
			index: 0,
			twoindex: 0,
			arrayInex: [],
			type: 0,
			typeList: [
				{
					id: 1,
					type: '50㎡以内',
					time: 2
				},
				{
					id: 2,
					type: '50㎡-90㎡',
					time: 3
				},
				{
					id: 3,
					type: '91㎡-120㎡',
					time: 4
				},
				{
					id: 4,
					type: '121㎡-150㎡',
					time: 5
				},
				{
					id: 5,
					type: '大于150㎡',
					time: 6
				}
			],
			inde: '',
			address: {
				province: '',
				city: '',
				region: '',
				address: ''
			},
			tims: '',
			employeeId: '',
			businessId: '',

			price: '',
			prices: '0',
			Price_minmax: {
				minPrice: '',
				maxPrice: ''
			},
			prices_sc: {
				maxAdditionalPrice: '',
				minAdditionalPrice: ''
			},
			chargeType: '',
			indes: '',
			typeLists: [],
			specificId: '',
			area: '',
			area_sc: '',
			supId: '',
			minPrice: '',
			maxPrice: '',
			zcxd: '',
			zcPrice: [],
			rcbjPrice: '',
			orderType: '',
			isShow: false,
			shows: false,
			additional: '', //附加项列表
			univalenceUnit: '',
			businessAdditional: []
		};
	},
	onLoad(option) {
		this.businessId = option.businessId;
		this.supId = option.supId;
		this.employeeId = option.employeeId;
		this.price = option.price;
		this.zcxd = option.zcxd;
		this.titleName = option.titleName;
		this.orderType = option.orderType;
		// this.orderType, '2一键匹配'
		this.chargeType = option.chargeType;
		if (this.chargeType == 3 || this.orderType == 2) {
			// this.getType(); // 获取规格类型
		} else if (this.zcxd == 1) {
			this.getZcxd(); // 再次下单获取员工单价
		}
		this.getDatas();
		this.getAddressList(); // 获取默认地址
		// this.getPrice(); // 获取价格区间
		this.MatchingOrderInfo();
		// this.tims=this.typeList[0].time
	},
	methods: {
		is_show() {
			this.show = true;
		},
		// 日常保洁小时
		valChange(e) {
			this.byqx_numer = e.value;
			this.tims = e.value;

			if (e.value != 2 && e.value != 3 && e.value != 4 && e.value != 5 && e.value != 6) {
				this.inde = '';
			}
			if (e.value == 2 || e.value == 3 || e.value == 4 || e.value == 5 || e.value == 6) {
				this.inde = e.value - 1;
			}
		},
		valChange_jd(e) {
			this.choose_num = e.value;
		},
		// 匹配页面信息
		MatchingOrderInfo() {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'unit-orders/MatchingOrderInfo'
			};
			let data = {
				businessId: this.businessId
				// businessId: 29
			};
			this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					this.maxPrice = res.data.maxPrice;
					this.minPrice = res.data.minPrice;
					this.additional = res.data.additional;
					this.univalenceUnit = res.data.univalenceUnit;
					// 布艺清洗
					if (this.chargeType == 2) {
						//日常保洁
					} else if (this.chargeType == 1) {
						this.detal(2, 0);
					}
					//家电清洗
					else if (this.chargeType == 3) {
						this.typeLists = res.data.businessSpecific;
						this.detals(this.typeLists[0].specificId);
					}
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},

		//点击确定的值
		confirm(e) {
			this.result = e[0].label + ' ' + e[1].label;
			this.isShow = false;
		},
		cancel(e) {},
		getAddressList() {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'user-address/first'
			};
			this.http.httpTokenRequest(opts).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					if (res.data) {
						this.address = res.data;
						this.shows = false;
					} else {
						this.shows = true;
					}
				}
			});
		},
		adds() {
			uni.navigateTo({
				url: '../personal/addAddress?type=0'
			});
		},
		getAddress() {
			uni.navigateTo({
				url: '../personal/address?type=1'
			});
		},
		// 日常保洁
		detal(time, index) {
			this.tims = time;
			this.choose_time = time;
			this.indexs = index + 1;
			this.inde = this.indexs;
			if (this.supId == 1) {
				this.prices = (this.tims * this.minPrice).toFixed(2) + '~' + (this.tims * this.maxPrice).toFixed(2);
			} else if (this.orderType == 2) {
				this.prices = (this.tims * this.minPrice).toFixed(2) + '~' + (this.tims * this.maxPrice).toFixed(2);
			} else if (this.chargeType == 1 && this.orderType == 2) {
				this.prices = (this.rcbjPrice * this.tims).toFixed(2);
			} else if (this.zcxd == 1) {
				this.prices = (this.rcbjPrice * this.tims).toFixed(2);
			} else {
				this.prices = (this.price * this.tims).toFixed(2);
			}
		},
		// 冰箱清洗
		detals(specificId) {
			this.specificId = specificId;
			this.indes = specificId;

			// this.prices = this.minPrice + '~' + this.maxPrice;
		},
		// 布艺清洗
		onInput(e) {
			if (this.supId == 1 || this.orderType == 2) {
				this.Price_minmax.minPrice = (e.detail.value * this.minPrice).toFixed(2);
				this.Price_minmax.maxPrice = (e.detail.value * this.maxPrice).toFixed(2);
				this.prices = (e.detail.value * this.minPrice).toFixed(2) + '~' + (e.detail.value * this.maxPrice).toFixed(2);
			} else if (this.chargeType == 2 && this.orderType == 2) {
				this.prices = (this.rcbjPrice * e.detail.value).toFixed(2);
			} else if (this.zcxd == 1) {
				this.prices = (this.rcbjPrice * e.detail.value).toFixed(2);
			} else {
				this.prices = (e.detail.value * this.price).toFixed(2);
			}
		},
		onInput2(e) {
			this.prices_sc.minAdditionalPrice = (e.detail.value * this.additional[0].minAdditionalPrice).toFixed(2);
			this.prices_sc.maxAdditionalPrice = (e.detail.value * this.additional[0].maxAdditionalPrice).toFixed(2);
			if (this.supId == 1 || this.orderType == 2) {
				this.prices =
					(Number(this.Price_minmax.minPrice) + Number(this.prices_sc.minAdditionalPrice)).toFixed(2) +
					'~' +
					(Number(this.Price_minmax.maxPrice) + Number(this.prices_sc.maxAdditionalPrice)).toFixed(2);
			} else {
				this.prices = (this.prices + this.prices_sc.minAdditionalPrice).toFixed(2) + '~' + (this.prices + this.prices_sc.maxAdditionalPrice).toFixed(2);
			}
		},

		getType() {
			let _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'business/getBusinessSpecific'
			};
			let data = {
				employeeId: _this.employeeId,
				businessId: _this.businessId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					_this.typeLists = res.data;
					_this.specificId = res.data.specificId;
					this.indes = res.data.specificId;
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		getPrice() {
			let _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'business/getSpecificByBusiness'
			};
			let data = {
				businessId: _this.businessId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					_this.maxPrice = res.data.maxPrice;
					_this.minPrice = res.data.minPrice;
					if (this.chargeType == 1) {
						// this.inde=this.typeList[0].id
						this.detal(2, 0);
					} else if (this.chargeType == 3) {
						this.detals(_this.typeLists[0].univalence, _this.typeLists[0].specificId, 0);
					}
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		getZcxd() {
			let _this = this;
			//再次下单获取员工单价
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'orders/getPriceByBusinessId'
			};
			let data = {
				businessId: _this.businessId,
				employeeId: _this.employeeId
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					if (_this.chargeType == 1 && _this.orderType != 2) {
						_this.rcbjPrice = res.data.price[0].univalence;
					} else if (_this.chargeType == 2) {
						_this.rcbjPrice = res.data.price[0].univalence;
					}
				}
			});
		},
		fast() {
			var _this = this;
			if (this.titleName == '玻璃清洗') {
				if (this.area_sc == '') {
					this.businessAdditional = [];
				} else {
					this.businessAdditional = [
						{
							additionalId: this.additional[0].additionalId || '',
							additionalAmount: this.area_sc
						}
					];
				}
			}
			if (_this.tims == '' && _this.chargeType == 1) {
				_this.$refs.uToast.show({
					title: '请选择服务时长'
				});
			} else if (_this.specificId == '' && _this.chargeType == 3) {
				_this.$refs.uToast.show({
					title: '请选择服务时长'
				});
			} else if (_this.area == '' && _this.chargeType == 2) {
				_this.$refs.uToast.show({
					title: '请输入面积'
				});
			} else if (_this.result == '请选择时间') {
				_this.isShow = true;
			} else {
				_this.loding_istrue = true;
				uni.requestSubscribeMessage({
					tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
					success(res) {
						_this.goAppointment();
					},
					fail(err) {
						_this.goAppointment();
					}
				});
			}
		},
		// 订阅后预约
		goAppointment() {
			var _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'unit-orders/creatMatchingOrder'
			};
			let data = {
				businessId: _this.businessId,
				specificId: _this.specificId,
				amount: _this.tims || _this.area || _this.choose_num,
				userAddressId: _this.address.addressId,
				startTime: _this.result,
				businessAdditional: _this.businessAdditional
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == 200) {
					_this.loding_istrue = false;
					_this.$refs.uToast.show({
						title: '预约成功',
						type: 'success'
					});
					setTimeout(function() {
						uni.navigateTo({
							url: './orderSuccess?orderId=' + res.data.orderId + '&type=' + 2
						});
					}, 500);
				} else {
					_this.loding_istrue = false;
					_this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		},
		// 请选择时间
		getDatas() {
			var arr = [];
			var _this = this;
			var date = new Date();
			var year = date.getFullYear();
			var mon = date.getMonth() + 1;
			var day = date.getDate();
			if (mon <= 9) {
				//如果小于9的话，则需要加上0
				mon = '0' + mon;
			} //getdate()返回的是1-31，则不需要加1
			if (day <= 9) {
				//如果小于9的话，则需要加上0
				day = '0' + day;
			}
			var showDate = year + '-' + mon + '-' + day;
			var nextData = '';
			for (var i = 1; i <= 6; i++) {
				//后7天
				date.setDate(date.getDate() + 1);
				var mons = date.getMonth() + 1;
				if (mons <= 9) {
					mons = '0' + mons;
				}
				var days = date.getDate();
				if (days <= 9) {
					days = '0' + days;
				}
				nextData = date.getFullYear() + '-' + mons + '-' + days;
				arr.push({
					value: i + 1,
					label: nextData
				});
			}
			var datas = [
				{
					value: 1,
					label: '07:00'
				},
				{
					value: 2,
					label: '08:00'
				},
				{
					value: 3,
					label: '09:00'
				},

				{
					value: 4,
					label: '10:00'
				},
				{
					value: 5,
					label: '11:00'
				},
				{
					value: 6,
					label: '12:00'
				},
				{
					value: 7,
					label: '13:00'
				},
				{
					value: 8,
					label: '14:00'
				},

				{
					value: 9,
					label: '15:00'
				},
				{
					value: 10,
					label: '16:00'
				},
				{
					value: 11,
					label: '17:00'
				},
				{
					value: 12,
					label: '18:00'
				},
				{
					value: 13,
					label: '19:00'
				}
			];
			var nowtime = date.getHours();
			var indexs = null;
			datas.forEach((item, index) => {
				var tex = parseInt(item.label.substring(0, 2));
				if (parseInt(item.label.substring(0, 2)) == nowtime) {
					indexs = index;
				}
			});
			this.arrayInex = datas.splice(0, indexs + 1);
			var items = [];
			if (19 > nowtime) {
				items.push({
					value: 1,
					label: showDate
				});
			}
			items = items.concat(arr);
			items.forEach((item, index) => {
				if (index == 0 && datas.length > 0) {
					item.children = datas;
				} else {
					item.children = [
						{
							value: 1,
							label: '07:00'
						},
						{
							value: 2,
							label: '08:00'
						},
						{
							value: 3,
							label: '09:00'
						},

						{
							value: 4,
							label: '10:00'
						},
						{
							value: 5,
							label: '11:00'
						},
						{
							value: 6,
							label: '12:00'
						},
						{
							value: 7,
							label: '13:00'
						},
						{
							value: 8,
							label: '14:00'
						},

						{
							value: 9,
							label: '15:00'
						},
						{
							value: 10,
							label: '16:00'
						},
						{
							value: 11,
							label: '17:00'
						},
						{
							value: 12,
							label: '18:00'
						},
						{
							value: 13,
							label: '19:00'
						}
					];
				}
			});
			this.list = items;
		}
	}
};
</script>

<style scoped lang="scss">
.head {
	background: #ffffff;
	// box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	opacity: 1;
	border-radius: 5px;
	margin: 22rpx auto;
	// padding: 0rpx 26rpx;
	color: #3f3f3f;
	font-size: 30rpx;
	padding-top: 20rpx;
	width: 92%;
	margin: auto;
	font-weight: 400;
}

.fenlei {
	display: flex;
	flex-wrap: wrap;
	padding-top: 26rpx;
	width: 92%;
	margin: auto;
	padding: 16rpx 0rpx 0 0rpx;
}
.type {
	background: #ffffff;
	// border: 1px solid #fca800;
	opacity: 1;
	// border-radius: 52rpx;
	padding: 0 13px;
	line-height: 74rpx;
	font-size: 26rpx;
	text-align: center;
	font-family: PingFang SC;
	font-weight: 400;
	margin-right: 20rpx;
	margin-top: 20rpx;
	border-radius: 10rpx;
}

.type image {
	width: 32rpx;
	height: 32rpx;
	position: absolute;
	bottom: -20%;
	right: -10%;
}

.fen_type .tai {
	font-size: 30rpx;
}

.serve {
	font-size: 26rpx;
	color: #3f3f3f;
	font-weight: 400;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
}

.fuwu {
	display: flex;
	align-items: center;
}

.fuwu image {
	width: 10rpx;
	height: 18rpx;
}

.dizhi {
	width: 450rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 26rpx;
	color: #7a7a7a;
	font-weight: 400;
}

.contact {
	margin-top: 22rpx;
}

.contact .namm {
	// padding-left: 16rpx;
	font-size: 30rpx;
	color: #7a7a7a;
	font-weight: bold;
}
.contact .ads {
	padding-left: 25rpx;
	font-size: 26rpx;
}

.xiang {
	width: 200rpx;
	font-size: 26rpx;
}

.biaozhu {
	color: #f86565;
	display: flex;
	align-items: center;
	font-size: 26rpx;
	height: 64rpx;
	padding-left: 28rpx;
	padding-right: 18rpx;
	background-color: #fff4de;
	line-height: 64rpx;
}
.biaozhus {
	color: #f86565;
	display: flex;
	align-items: center;
	font-size: 26rpx;
	height: 64rpx;
	padding-left: 28rpx;
	padding-right: 90rpx;
	line-height: 64rpx;
}
.biaozhus image {
	width: 29rpx;
	height: 29rpx;
}
.biaozhu image {
	width: 29rpx;
	height: 29rpx;
}

.choose {
	// padding-left: 20rpx;
	font-size: 30rpx;
	color: #3f3f3f;
	font-weight: 400;
	// margin-top: 30rpx;
}

.biao_zhu {
	color: #979797;
	width: 92%;
	margin: auto;
	// padding: 12rpx 0 20rpx 64rpx;
	font-size: 26rpx;
	margin-top: 30rpx;
}

.zhu {
	font-size: 30rpx;
}

.biao_zhu .write {
	// padding-right: 182rpx;
	margin-top: 10rpx;
	line-height: 36rpx;
}

.time {
	display: flex;
	width: 92%;
	margin: 32rpx auto;
	justify-content: space-between;
	align-items: center;
	// padding-right: 48rpx;
	// margin-top: 32rpx;
}

.start {
	// padding-left: 50rpx;
	font-size: 30rpx;
	color: #3f3f3f;
	font-weight: 400;
}

.xuanze {
	display: flex;
	width: 60%;
}

.xuanze view {
	width: 90%;
	line-height: 32rpx;
	color: #979797;
}

.xuanze image {
	width: 18rpx;
	height: 30rpx;
}

.t_img {
	width: 24rpx;
	height: 40rpx;
}

.footer {
	// height: 112rpx;
	position: fixed;
	z-index: 99;
	bottom: 0;
	width: 100%;
	background: #ffffff;
	opacity: 1;
}

.foot_mon {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 26rpx 38rpx 20rpx 40rpx;
}

.writes {
	font-size: 38rpx;
	font-weight: 500;
}

.writes text {
	color: #fa5151;
}

.fen_types {
	display: flex;
	align-items: center;
	color: #3f3f3f;
	font-size: 40rpx;
}

.fen_types input {
	width: 164rpx;
	// height: 104rpx;
	// margin: 30rpx 36rpx 28rpx 48rpx;
	// box-shadow: 0px 3rpx 6rpx rgba(241, 179, 10, 0.33);
	// border-radius: 10rpx;
	// padding: 0 20rpx;
	border-bottom: 2rpx solid #b8b7b7;
}

.fenlei .acts {
	color: #fc8a17;
	border: 2rpx solid #fc8a17;
	// box-shadow: 0px 3rpx 6rpx rgba(241, 179, 10, 0.37);
	// background-color: #fca800;
}
.fenlei .acts_2 {
	border: 2rpx solid #c2c2c2;
}

.actss {
	color: #fca800;
}
</style>
